<html>

<head>
    <meta charset="utf8" />
    <title>添加活动</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    
</head>
<style type="text/css">
    *{
        font-size:20px;
        font-family:宋体;
        font-weight: 900;
        margin:0px;
        padding: 0px;
      
    }
    label{
        display: inline-block;
        width:150px;

    }
    .activity{
        position: relative;
        top:200px;
        margin:0 auto;
        width:400px;
        height: 400px;
    }
    .name{
        margin-bottom: 30px;
    }

    .en_name{
        margin-bottom: 30px;
        
    }

    button[type="reset"]{
        float:left;

    }
    button[type="submit"]{
        float:right;
        margin-right: 22px
    }
</style>

<body>
    <form method="GET" action="" >
        <div class="activity">
            <div class="name">
                <label>活动名称:</label>
                <input required name="name" />
            </div>
            <div class="en_name">
                <label>活动拼音名称:</label>
                <input  required name="en_name" />
            </div>
            <div class="event">
                <button type="reset">重置</button>
                <button type="submit">提交</button>
            </div>

        </div>
    </form>
    
</body>
<script type="text/javascript">
    
    $("form").submit(function(){
        data=$("form").serialize();
        console.log("data",data);
        url="./CreateActivity.php?"+data;
        $.ajax(
            {
                url:url,
                type:"GET",
                success:function(data){
                    alert(data.msg);
                },
                dataType:"json",
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    alert(XMLHttpRequest.responseText);
                    console.log(XMLHttpRequest);
                    console.log(textStatus);
                    console.log(errorThrown);
                }

            }
        );
        return false;
    });
</script>

</html>